<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bars">
			<view class="search-bar">
				<view class="search-left">
					<uni-icons type="scan" size="20" color="#ff6700"></uni-icons>
				</view>
				<input class="search-input" v-model="queryFrom.keyword" />
				<view class="search-right">
					<uni-icons type="search" size="20" color="#ff6700" @tap="getProdustList"></uni-icons>
				</view>
			</view>
		</view>


		<view class="navs flex">
			<scroll-view scroll-x class="bg-white nav" style="width: 90%;" :scroll-left="scrollLeft">
				<view class="cu-item" style="height: 60rpx;line-height: 60rpx;"
					:class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 10" :key="index"
					@tap="topTabSelect" :data-id="index">
					<!-- {{item.brandName}} -->
					tab{{index}}
				</view>
			</scroll-view>
			<view class="flex justify-center align-center nav_type" style="width: 10%;">
				<text class="lg" style="font-size: 24rpx;color: #ff6700;" @tap="isFilter = !isFilter">筛选</text>
			</view>
		</view>

		<!-- 商品推荐区 -->
		<view class="goods-list" v-if="this.goodsList.length > 0" :style="{'margin-top': goodsListTop +'rpx;'}">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @tap="topDetail(item)">
				<image class="goods-img" :src="item.skuImg" mode="widthFix"></image>
				<view class="goods-info">
					<rich-text :nodes="item.skuTitle"></rich-text>
					<text class="goods-price">
						<text style="font-size: 24rpx;">￥</text>
						{{item.skuPrice}}
					</text>
				</view>
			</view>
		</view>



		<view v-else class="flex justify-center align-center" style="height: calc(100vh - 88rpx);">
			暂无想要的宝贝，试试搜索其他的吧...
		</view>



		<u-popup v-model="isFilter" mode="bottom" border-radius="14" height="1000rpx" :closeable="true">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;padding-top:15rpx;padding-bottom:40rpx;">
				全部筛查
			</view>
			<view class="VerticalBox">
				<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
					style="height:calc(1000rpx - 102rpx)">
					<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list"
						:key="index" @tap="TabSelect" :data-id="index">
						{{item.name}}
					</view>
				</scroll-view>
				<scroll-view class="VerticalMain padding-top" scroll-y scroll-with-animation
					style="height:calc(1000rpx - 102rpx)" :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
					<view class="padding-lr" v-for="(res,indexs) in list" :key="indexs" :id="'main-'+indexs">
						<view class="bg-white">
							<text class="cuIcon-title text-green"></text> {{res.name}}
						</view>
						<view class="padding bg-white flex flex-wrap justify-between">
							<view class="radius flex align-center justify-center selectLsit"
								:style="{'border':'2rpx solid'+ selectedValues.includes(it)?'#E10A07':'#e8e8e8', 'color': selectedValues.includes(it)?'#E10A07':'#959595'}"
								@tap="screenCheckbox(it)" v-for="(it , inx) in res.value" :key="inx">
								{{it}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 商品推荐数据
				goodsList: [],
				TabCur: 0,
				scrollLeft: 0,
				queryFrom: {
					pageNum: 1,
					brandId: "",
					attrs: "",
					// attrs: "15_高通(Qualcomm),16_骁龙855",
					shopId: "",
					keyword: "",
					catalog3Id: "",
					sort: '',
					hasStock: "",
					skuPrice: "",
					_queryString: "",
				},
				productList: {
					brands: [{
						brandName: '华为'
					}],
				},
				goodsListTop: 146,
				isFilter: false,




				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,

				selectedValues: [], // 存储选中值
			}
		},
		onLoad(option) {
			this.queryFrom.keyword = option.placeholder;
			this.getProdustList();
		},
		methods: {
			// 获取推荐商品列表
			getProdustList() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$Request.get('/app/product/skuinfo/searchProductList', this.queryFrom).then(res => {
					if (res.code == 0 && res.data.products) {
						this.productList = res.data
						// this.goodsList = res.data.products
						if (this.queryFrom.pageNum == 1) {
							this.goodsList = res.data.products
						} else {
							this.goodsList = [...this.goodsList, ...res.data.products]
						}
						let list = [{}];
						for (let i = 0; i < res.data.attrs.length; i++) {
							list[i] = {};
							list[i].name = res.data.attrs[i].attrName;
							list[i].value = res.data.attrs[i].attrValue;
							list[i].id = i;
						}

						this.list = list;
					}
					uni.hideLoading()
				});
			},

			topTabSelect(e) {

				this.TabCur = e.currentTarget.dataset.id
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60

			},

			//判断是否展示tab栏
			isTab() {
				if (this.productList.brands.length > 0) {
					let data = this.productList.brands.filter(item => item.brandName == this.queryFrom.keyword)
					if (data.length > 0) {
						this.goodsListTop = 88
						return false
					} else {
						this.goodsListTop = 176
						return true
					}
				} else {
					this.goodsListTop = 88
					return false
				}
			},

			TabSelect(e) {

				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50


			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						return false
					}
				}
			},
				
			
			//跳转详情页
			topDetail(item){
				uni.navigateTo({
					url: '/shopping/shoppDetail/index?skuId=' + item.skuId
				})
			},
			
			
			//筛查条件
			screenCheckbox(e) {
				this.selectedValues.push(e)
				console.log(this.selectedValues);
				console.log(this.selectedValues.includes(e));
			},

		},
		
		
		onReachBottom: function() {
			if (this.productList.total == this.goodsList.length) {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			} else {
				this.queryFrom.pageNum = this.queryFrom.pageNum + 1;
				this.getProdustList()
			}
		},
		onPullDownRefresh: function() {
			this.queryFrom.pageNum = 1;
			this.getProdustList()
		},
		
	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 80rpx;
		/* 底部TabBar高度 */
		background-color: #f8f8f8;
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	/* 搜索栏 */
	.search-bars {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #fff;
		width: 100vw;
		padding: 0rpx 10rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		border: 4rpx solid #ff6700;
		// margin: 10rpx;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		background-color: #fff;
	}

	.search-left {
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		color: #6b6b6b;
		background: transparent;
	}

	.search-right {
		margin-left: 10rpx;
	}

	/* 商品推荐区 */
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// margin: 10rpx;
		padding: 20rpx 20rpx;
	}

	.goods-item {
		width: 49%;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.goods-img {
		width: 100%;
		height: auto;
	}

	.goods-info {
		padding: 10rpx;
	}

	.goods-name {
		font-size: 24rpx;
		color: #333;
		line-height: 36rpx;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-price {
		font-size: 28rpx;
		color: #ff6700;
		font-weight: bold;
	}

	.navs {
		position: fixed;
		left: 0;
		width: 100vw;
		top: 88rpx;
		z-index: 999;
		background-color: #fff;
		padding: 0 20rpx;

		.nav_type {
			margin-left: 10rpx;
			box-shadow: -4rpx 0rpx 4rpx 0rpx #dcdcdc;

		}
	}



	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;

		.selectLsit {
			padding: 10rpx 10rpx;
			margin-bottom: 10rpx;
			font-size: 24rpx;
			width: 48%;
		}
	}
</style>